/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import DataStore from '../expand/dao/DataStore';
import {
    SafeAreaView,
    ScrollView,
    StyleSheet,
    View,
    Text,
    StatusBar,
    TextInput,
    Button
} from 'react-native';

import {
    Header,
    LearnMoreLinks,
    Colors,
    DebugInstructions,
    ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

type Props = {};
export default class DataStoreDemoPage extends Component<Props> {

    constructor(props) {
        super(props);
        this.state = {
            showText: ''
        }
        this.dataDtore = new DataStore();
    }

    loadData() {
        let url = `https://api.github.com/search/repositories?q=${this.value}`;
        this.dataDtore.fetchNetData(url)
            .then(data =>{
                let showData = `DATA: ${new Date(data.timestamp)}\n${JSON.stringify(data.data)}`;
                this.setState({
                    showText:showData
                })
            })
    .catch(error=>{
                error &&console.log(error.toString());
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <TextInput
                    style={styles.input}
                    onChangeText={text=>{
                        this.value = text;
                    }}
                />
                <Button
                    title="Get Data"
                    onPress = {() => {
                        this.loadData();
                    }}
                ></Button>
                <Text>
                    {this.state.showText}
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
});

// export default App;
